<template>
  <view style="position: relative;" :style="colorStyle">
	<view class="img_bg"></view>
    <view class="status_wrap" >
      <scroll-view class="catalog" scroll-x="true" :scroll-into-view='curclass' scroll-with-animation>
        <block v-for="(item,index) in list" :key="index">
          <view :class="{'catalog-item' : true, 'mr-60' : index === list.length  , 'active':curCatalog === index}"
            :id="'class'+index"
                @click="chooseCatalog(index)"
          >
            <image :src="item.icon" class="status_icon"/>
            <image src="./static/timer_icon_01.png" class="icon_arrow" v-if="list.length-1!==index" />
          </view>
        </block>
      </scroll-view>
      <view class="swiper_wrap">
        <swiper class="swiper" :style="{'height':swiperHeight}"  :current="curCatalog"  @change="swiperChange" >
            <swiper-item v-for="(item,index) in list" :key="index">
              <view class="swiper_content" :id="'item'+index">
                <view class="swiper_level">Lv.{{ item.level }}</view>
                <view class="swiper_title">{{ item.title }}</view>
                <view class="swiper_time">
                 <image src="./static/stimer_icon.png" class="time_icon" />
                  <view class="time_text">{{ item.time }}</view>
                </view>
                <view class="swiper_desc">
                  <view class="desc_item" v-for="txt in item.desc">{{ txt }}</view>
                </view>
              </view>
            </swiper-item>
        </swiper>
      </view>
	</view>
  </view>
</template>

<script>
	import UniCalendar from "../admin/components/uni-calendar/uni-calendar";
  const app = getApp();
	import colors from '@/mixins/color';
	export default {
    components: {UniCalendar},
    data(){
      return{
        list: [
          {
            level: 1,
            title: '血糖升高',
            time: '0h-2h',
            icon: './static/wtools/Lv.1.png',
            desc: [
              '你在断食的前几个小时不会感到任何异状，因为此时身体人开始进行分解肝醣。胰脏分泌胰岛素以分解葡萄糖作为能量来源，并储存多余葡萄糖，以备后用。'
            ]
          },
          {
            level: 2,
            title: '血糖下降',
            time: '2h-5h',
            icon: './static/wtools/Lv.2.png',
            desc: [
              '由于胰岛素的作用，血糖飙升后正在回到正常水平的过程中。如果微微有饿感？可能反而是馋感。因为身体刚开始调适！'
            ]
          },
          {
            level: 3,
            title: '肝醣储存量下降',
            time: '5h-8h',
            icon: './static/wtools/Lv.3.png',
            desc: [
              '感到饥饿？肚子提醒您距离上一餐已经有断时间了，不过其实您没那么饿。',
              '快要饿死了？正在消耗肌肉？其实这些都只是想像，因为此时肝醣储存量才正要开始下降，并且可能还会消耗一些身体脂肪。',
              '身体会继续消化最后摄取的食物，开始使用储存的葡萄糖作为能量来源，并继续正常工作。',
              '一切都很顺利！再继续坚持下去！'
            ]
          },
          {
            level: 4,
            title: '糖质新生',
            time: '8h-10h',
            icon: './static/wtools/Lv.4.png',
            desc: [
              '最后用餐8小时后，肝脏会消耗最后的肝醣储存量，现在身体进入糖质新生状态。',
              '研究显示糖质新生为新陈代谢过程，将身体脂肪转换成葡萄糖，增加卡路里燃烧。',
              '恭喜你，身体已进入断食模式了！'
            ]
          },
          {
            level: 5,
            title: '剩下少量肝醣',
            time: '10h-12h',
            icon: './static/wtools/Lv.5.png',
            desc: [
              '你的肝醣储存量快不够了！因此你有可能感到烦躁或饥肠辘辘。放轻松，这只是身体在燃烧脂肪的现象。',
              '因为所剩肝醣不多，所以肥胖细胞（脂肪细胞）会释放脂肪到血液中，同时也会进入到肝脏转换成身体所需能量，其实这时是为了而生存欺骗身体开始燃烧脂肪！'
            ]
          },
          {
            level: 6,
            title: '酮症状态',
            time: '12h-18h',
            icon: './static/wtools/Lv.6.png',
            desc: [
              '您目前已进入生酮的代谢状态，肝醣几乎用尽，肝脏将脂肪转换成酮体（身体的一种替代能量来源）。',
              '储存的脂肪开始释放和被消耗，因此酮症又被称为『生酮燃脂状态』，亦能改善身体的发炎状态，因而为心脏、新陈代谢和大脑带来益处。'
            ]
          },
          {
            level: 7,
            title: '燃烧脂肪',
            time: '18h-24h',
            icon: './static/wtools/Lv.7.png',
            desc: [
              '到18小时，身体已经转为燃脂模式了，断食时间越长，越进入深层的酮症状态中，研究显示空腹12至24小时后，脂肪能量供应将增加60％，并在18小时后开始显著增加。目前：',
              '1. 酮体含量上升。',
              '2. 酮体做为信号份子，会告诉身体在压力环境下，能更好的调节新陈代谢。',
              '3. 身体已经准备启动对抗发炎与再生过程。'
            ]
          },
          {
            level: 8,
            title: '自噬',
            time: '24h-48h',
            icon: './static/wtools/Lv.8.png',
            desc: [
              '此时，身体会诱发自噬。细胞开始清理他们的房子，删除不必要或功能失调的元件。这是一件好事。能有次序地将解并回收。',
              '自噬过程中，细胞会分解病毒、细菌和受损成分。您会获得制造新细胞的能量。而这对细胞的健康和更新与生存相当重要，自噬最为人所知的主要好处，就是能倒转时光，让身体产生更年轻的细胞。'
            ]
          },
          {
            level: 9,
            title: '生长激素上升',
            time: '48h-56h',
            icon: './static/wtools/Lv.9.png',
            desc: [
              '生长激素含量远高于断食前的含量，这都要归功于断食期间产生的饥饿激素的分泌。',
              '生长激素有助于增加肌肉质量，并改善新血管健康。'
            ]
          },
          {
            level: 10,
            title: '胰岛素敏感',
            time: '56h-72h',
            icon: './static/wtools/Lv.10.png',
            desc: [
              '断食后，胰岛素处于最低含量，让您对胰岛素更加敏感，若您是糖尿病的高危人群，这无异是个好消息。',
              '从短期或长期来，降低胰岛素含量对健康都有许多好处，例如启动自噬作用或减少炎症。'
            ]
          },
          {
            level: 11,
            title: '免疫細胞再生',
            time: '72h',
            icon: './static/wtools/Lv.11.png',
            desc: [
              '『适者生存』。身体会拒绝细胞生存讯息传递路径，并回收在对抗病毒、细菌和微生物时受损的免疫细胞。',
              '为了填补『守卫空缺』身体会快速地再生新的免疫细胞，开启免疫系统再生，并将细胞转换为自我更新的状态，因此免疫系统变得越来越强大。'
            ]
          },
        ],
        curCatalog: 0,
        scrollViewWidth: 0,
        scrollLeft: 160,
        curclass:'',
		    swiperHeight:'',
        selected: [{
          info: '签到',
          date: '2024-01-18', // date为所需要打点的日期
          type: "abnormal" // abnormal显示为橙色点
        }, {
          date: '2024-01-19',
          type: "normal" // normal显示为蓝色点
        }, {
          date: '2024-02-19',
          type: "normal" // normal显示为蓝色点
        }],
      }
	 },
	 mixins: [colors],
  watch:{
    curCatalog(v){
      this.curclass = `class${v}`
    }
  },
  methods:{
    chooseCatalog(e){
		if(e == this.curCatalog){
			return  true
		} else {
			this.curCatalog = Number(e)
		}
    },
    swiperChange(){
		const element = "#item" + this.curCatalog;
		const query = uni.createSelectorQuery().in(this);
		query.select(element).boundingClientRect();
		query.exec(res => {
			if (res && res[0]) this.swiperHeight = res[0].height + 'px';
		});
    }
  }
}
</script>
<style lang="scss" scoped>
	.status_wrap{
		padding:15px
	}
.img_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 350rpx;
  z-index: -1;
  background-color: var(--view-theme);
  border-radius: 0% 0% 40% 50%;
}
.catalog {
  margin-top: 20rpx;
  height: 100%;
  width: 100%;
  white-space: nowrap;
  font-size: 0;
}
.catalog-item {
  display: inline-flex;
  align-items: center;
  height: 100%;
  line-height: 96rpx;
  font-size: 28rpx;
  color: #ffffff;
  margin-left: 60rpx;
  position: relative;
  opacity: .5;
}
.catalog-item.active {
  opacity: 1;
}
.catalog-item:first-of-type {
  padding-left: 300rpx;
}
.catalog-item.mr-60 {
  padding-right: 60rpx;
}
.status_icon {
  width: 146rpx;
  height: 146rpx;
  display: block;
}
.icon_arrow {
  width: 26rpx;
  height: 26rpx;
  margin-left: 40rpx;
  display: block;
}
.swiper_wrap {
  margin-top: 50rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
}
.swiper {
  background: #ffffff;
  box-shadow: 0px 1px 46px 0px rgba(136, 142, 163, 0.33);
  border-radius: 36rpx;
}
.swiper_content {
  padding: 40rpx 60rpx 60rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.swiper_content::after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: -30rpx;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border: 20rpx solid transparent;
  border-bottom-color: #fff;
}
.swiper_level {
  padding: 0 10rpx;
  font-size: 22rpx;
  height: 32rpx;
  line-height: 32rpx;
  color: #ffffff;
  background: #C5CFEF;
  border-radius: 10rpx;
}
.swiper_title {
  margin-top: 36rpx;
  font-size: 32rpx;
  font-weight: 600;
  color: #5B637C;
  line-height: 1;
}
.swiper_time {
  margin-top: 28rpx;
  display: flex;
  align-items: center;
}
.time_icon {
  width: 26rpx;
  height: 26rpx;
}
.time_text {
  color: #8892B1;
  font-size: 26rpx;
  font-weight: 600;
  margin-left: 10rpx;
}
.swiper_desc {
  margin-top: 52rpx;
}
.desc_item {
  color: #5B637C;
  font-size: 26rpx;
  line-height: 40rpx;
}
.desc_item + .desc_item {
  margin-top: 20rpx;
}
</style>
